<template>
  <div class="search">
    <van-nav-bar left-arrow>
      <template #left>
        <van-icon
          name="arrow-left"
          size="18"
          color="#8d8787"
          @click="$emit('change')"
        />
      </template>
      <template #title>
        <van-search
          v-model="val"
          placeholder="请输入搜索关键词"
          @search="onSearch"
          shape="round"
        >
          <template #left-icon>
            <van-icon name="search" size="18" color="#8d8787" />
          </template>
        </van-search>
      </template>
      <template #right>
        <div @click="onSearch">搜索</div>
      </template>
    </van-nav-bar>
    <div v-if="isshow">
      <div class="historyList">
        <h5>历史搜索</h5>
        <div>
          <van-button v-for="item in historyList" :key="item">{{ item }}</van-button>
        </div>
      </div>
      <div class="billboard">
        <div class="hotSearch ">
          <Hot class="hotright" :list="hotSearchList" :title="'七鲜热搜'"></Hot>
        </div>
        <div class="hotSales">
          <Hot class="hotleft" :list="hotSales" :title="'热销排行榜'"></Hot>
        </div>
      </div>
    </div>
    <div v-else class="content">
      <ul>
        <li v-for="item in searchlist" :key="item.productId" @click="goDetail(item.productId)" class="perPro">
          <div>
            <img :src="item.img">
          </div>
          <div>
            <p class="proname">{{ item.proname }}</p>
            <p>
              <span class="gettime">{{ item.gettime }}</span>
              <span class="iszhijiang">{{ item.iscutdownmoney ? "直降" : "" }}</span>
            </p>
            <p style="color: #c8c6c6;margin: 10px 0 6px 0;">&yen;{{ item.oldprice == item.newprice ? "" : item.oldprice }}
            </p>
            <p style="position: relative;width: 35vw;">
              <span style="color:red;font-size: 14px;font-weight: bold;">&yen;{{ item.newprice }}</span> / {{ item.unit
              }} <span class="list_borit">+</span>
            </p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Hot from "@/views/homes/hot.vue"
import Home from "@/api/home.js"
export default {
  components: {
    Hot,
  },
  data() {
    return {
      val: '',//搜索框绑定值
      historyList: [],// 搜索历史数组
      hotSearchList: ['乌龙茶', '牙膏', '香葱', '青菜'],
      hotSales: ['乌龙茶1', '牙膏2', '香葱3', '青菜4'],
      isshow: true,
      searchlist: []
    }
  },
  mounted() {
    this.historyList = JSON.parse(localStorage.getItem("historyList")) || [
      "西安",
      "牛肉干",
      "蘑菇",
    ];
  },
  methods: {
    async onSearch() {
      console.log(this.val)
      let res = await Home.getSearchList({ productname: this.val })
      console.log(res)
      if (res.data.length == 0) {
        return
      } else if (res.data.length) {
        this.isshow = false
        this.searchlist = res.data
        // console.log(this.searchlist)
      }else{
        alert("暂无商品")
      }
    },
    goDetail(productId) {
      this.$router.push({ path: `/proDetail/${productId}` })
    }
  },
}
</script>

<style scoped lang="scss">
.search {
  width: 100vw;
  height: 100vh;
  overflow: hidden;

  .van-nav-bar {
    height: 8vh;
    width: 100%;
    border-bottom: 1px solid #b3afaf;

    .van-search {
      width: 60vw;
      margin: 0 auto;
      border-radius: 20px;
      padding: 0;
    }
  }

  .historyList {
    width: 100vw;
    // height: 30vh;
    margin-bottom: 20px;
    box-sizing: border-box;

    div {
      display: flex;
      flex-wrap: wrap;

      .van-button {
        border-radius: 30px;
        height: 30px;
        background: #f1ecec;
        margin-right: 6px;
        margin-top: 20px;
      }
    }
  }

  .billboard {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    .hotSearch {
      margin-left:12px ;
    }
    .hotSales {
      margin-left: -30px;

    }
  }
  .content {
  width: 100%;

  .perPro {
    box-sizing: border-box;
    padding: 10px;
    height: 120px;
    width: 100%;
    border-bottom: 1px solid #eee;
    display: flex;

    .proname {
      margin-bottom: 10px;
      // width: 100%;
    }



    .gettime {
      display: inline-block;
      padding: 0 4px 0 4px;
      background: rgb(179, 238, 140);
      color: rgb(27, 181, 55);
      border-radius: 4px;
      margin-right: 10px;
    }

    .iszhijiang {
      display: inline-block;
      padding: 0 4px 0 4px;
      background: rgb(236, 184, 184);
      color: rgb(234, 91, 80);
      border-radius: 4px;
    }

    img {
      width: 100px;
      height: 100px;
      margin-right: 10px;
    }
  }
 
.hotright{
  border-right: none;
  border-top-left-radius:20px ;
  // border-bottom-right-radius:none ;
}
.hotleft{
  border-left: none;
  border-top-left-radius:none ;
  border-bottom-left-radius:none ;
}
}
}
</style>